<template>
	<up-sticky>
		<!-- #ifdef MP-WEIXIN -->
		<view class="header display_flex" :style="{'marginTop':navHeight+'px'}">
		<!-- #endif -->
			<!-- #ifdef APP || H5 -->
			<view class="header display_flex">
			<!-- #endif -->
				<image src="http://112.124.50.179:8888/imgs/back.png" mode="widthFix" @click="goBack"
					style="margin-right: 30rpx;width: 18rpx;">
				</image>
				<up-input :placeholder="props.placeHolder" border="none" shape="circle" clearable
					customStyle="background:#fff;height: 72rpx;padding-right:32rpx" placeholderClass="placeholderClass"
					prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399;padding-left:24rpx"
					v-model.trim="searchContent" @clear='clear' @change="changeInput"></up-input>
				<view class="searchText" @click="search">搜索</view>
			</view>
	</up-sticky>

	<view v-if="showHistory">
		<view class="titleBox">
			<view class="title">搜索记录</view>
			<image v-if="!isDelete" @click="del" src="http://112.124.50.179:8888/imgs/home/delete.png" mode=""></image>
			<view v-else class="func">
				<text style="margin-right: 40rpx;" @click="delAll">清空</text>
				<text style="color: #F3E0BB;" @click="finish">完成</text>
			</view>
		</view>
		<view class="tagList">
			<view class="tagBox" v-for="(item,index) in tagList" @click="clickTag(item)">
				<view class="tag">
					{{item}}
				</view>
				<image v-if="isDelete" @click.stop="closeTag(item)" class="close" src="http://112.124.50.179:8888/imgs/tagClose.png">
				</image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from 'vue'
	const props = defineProps({
		localStorageName: {
			type: String,
			default: 'homeSearchHistory'
		},
		placeHolder: {
			type: String,
			default: '请搜索'
		},
		// showHistory: {
		// 	type: Boolean,
		// 	default: 'false'
		// }
	})
	const emit = defineEmits(['search', 'clear'])
	const navHeight = getApp().globalData.navHeight

	const searchContent = ref('') //搜索内容

	const isDelete = ref(false)
	const tagList = ref([])
	const showHistory = ref(true)

	onMounted(() => {
		if (uni.getStorageSync(props.localStorageName) != undefined) {
			tagList.value = JSON.parse(uni.getStorageSync(props.localStorageName))
		}
	})

	const goBack = () => {
		uni.navigateBack()
	}

	/**
	 * 搜索内容
	 */
	const search = () => {
		if (searchContent.value.trim() !== '') {
			if (tagList.value.indexOf(searchContent.value) == -1) {
				tagList.value.push(searchContent.value)
				uni.setStorageSync(props.localStorageName, JSON.stringify(tagList.value))
			}
			showHistory.value = false
			emit('search', searchContent)
		}
	}

	/**
	 * 点击删除按钮
	 */
	const del = () => {
		isDelete.value = true
	}

	/**
	 * 删除标签
	 */
	const closeTag = (tag) => {
		tagList.value = tagList.value.filter((item) => item !== tag)
		uni.setStorageSync(props.localStorageName, JSON.stringify(tagList.value))
	}

	/**
	 * 完成操作
	 */
	const finish = () => {
		isDelete.value = false
	}

	/**
	 * 清空操作
	 */
	const delAll = () => {
		tagList.value = []
		uni.setStorageSync(props.localStorageName, JSON.stringify(tagList.value))
	}

	/**
	 * 点击标签
	 */
	const clickTag = (item) => {
		searchContent.value = item
		showHistory.value = false
		emit('search', item)
	}

	/**
	 * 清空input输入框
	 */
	const clear = () => {
		showHistory.value = true
		emit('clear')
	}
	
	/**
	 * 监听搜素改变
	 */
	const changeInput =(value)=>{
		console.log(value)
		if(value === ''){
			showHistory.value = true
			emit('clear')
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		justify-content: space-between;
		align-items: center;
		padding-bottom: 32rpx;

		.placeholderClass {
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #969DA3;
			line-height: 72rpx;
			font-style: normal;
			text-transform: none;
		}

		.searchText {
			margin-left: 32rpx;
			color: #F3E0BB;
			line-height: 32rpx;
		}
	}

	.titleBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 22rpx;
		height: 30rpx;

		.title {
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 30rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.func {
			font-size: 24rpx;
			color: #ECECEC;
			line-height: 30rpx;
		}
	}

	.tagList {
		display: flex;
		align-items: center;
		margin-top: 32rpx;
		margin-right: -40rpx;
		flex-wrap: wrap;

		.tagBox {
			position: relative;
			max-width: 100%;
			margin-right: 40rpx;
		}

		.tag {
			background: #292B2A;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			padding: 16rpx 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #C5C5C5;
			line-height: 24rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 32rpx;
		}

		.close {
			position: absolute;
			right: -10rpx;
			top: -10rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>